<template>
  <div id="app">
    <!-- vue2里组件 要求是唯一根元素      帮我们渲染匹配到的组件 -->
      <!-- <router-view /> -->


    <!-- 放页面容器   也就是说带了缓存  等于keep-alive中组件在销毁时会保存在内存中
    下次显示时不会重新创建 而是从内存中拿到
    因为有些页面不能被缓存 所可能会出现错误-->
    <!-- 需要被缓存 -->
    <keep-alive>
      <router-view v-if="$route.meta.keep" />
    </keep-alive>
    <!-- 不需要被缓存 -->
      <router-view v-if="!$route.meta.keep" />

    <van-tabbar
    class="van-tabbar-bkg"
      route
      v-model="active"
      v-if="$route.meta.isRoot"
      active-color="#ee0a24"
      inactive-color="#000"
    >
      <van-tabbar-item replace to="/">
        <span>首页</span>
        <template #icon="porps">
          <svg class="tt-icon" aria-hidden="true">
            <use xlink:href="#icon-shouye"></use>
          </svg>
        </template>
      </van-tabbar-item>
      <!-- <van-tabbar-item replace to="/publish" icon="home-o">首页</van-tabbar-item> -->
      <van-tabbar-item replace to="/publish" icon="add-o">发布</van-tabbar-item>
      <van-tabbar-item replace to="/my" icon="friends-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 0,
    };
  },
  created() {
    // // 刷新页面    重新登录
    // let token = localStorage.getItem("token");
    // let tokenExpired = localStorage.getItem("tokenExpired");
    // if (token) {
    //   // 原来登陆过
    //   let now = new Date().getTime();
    //   if (now >= Number(tokenExpired)) {
    //     // token过期后
    //     localStorage.removeItem("token");
    //     localStorage.removeItem("tokenExpired");
    //     this.$toast("身份验证已过期，请重新登录");
    //     return;
    //   }
    //   // 请求接口
    //   this.$store.dispatch("getuserInfo", token);
    // } else {
    //   // 未登陆过
    // }
  },
};
</script>
<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
// *{
//   margin: 0;
//   padding: 0;
// }
// li{
//   list-style: none;
// }

.tt-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
